<template>
  <div class="container">
    <van-swipe class="my-swiper" :autoplay="3000" indicator-color="#B47C2D">
      <van-swipe-item v-for="i in intro.list_img" :key="i">
        <img v-lazy="i" />
      </van-swipe-item>
    </van-swipe>

    <h3>{{intro.title}}</h3>
    <div class="content" v-html="intro.content"></div>
    <p>
      <span></span>联系电话：
      <a :href="'tel:'+intro.contact">{{intro.contact}}</a>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      intro: ""
    };
  },
  mounted() {
    this.getIntro();
  },
  methods: {
    getIntro() {
      this.$api.getIntro(2).then(res => {
        this.intro = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  img {
    width: 100%;
    height: 160px;
    border-radius: 5px;
  }
  h3 {
    color: #f9c05d;
    font-size: 15px;
    margin: 26px 0 20px;
    padding-left: 10px;
    height: 24px;
    line-height: 24px;
    border-left: 4px solid #f9c05d;
    background: rgba(249, 192, 93, 0.1);
    display: inline-block;
  }
  p {
    text-align: center;
    height: 23px;
    background: rgba(249, 192, 93, 0.1);
    line-height: 23px;
    margin-top: 20px;
    font-size: 15px;
    span {
      width: 17px;
      height: 17px;
      margin-bottom: -3px;
      margin-right: 4px;
      display: inline-block;
      background: url(../.././img/intro/tel1.png) no-repeat;
      background-size: contain;
    }
    a {
      color: #e1ab2a;
      font-weight: 500;
    }
  }
}
</style>